<template>
  <div class="main ad-manage-list">
    <section>
      <div class="btn-block">
        <router-link :to="{name: 'productRecommendAdd'}" class="filter-item" v-if="rightsButtons['add']">
          <el-button type="success" size="small" icon="el-icon-circle-plus" plain>新增</el-button>
        </router-link>
        <el-button type="danger" size="small" v-if="rightsButtons['batchDel']" @click="delItem('batch', '')">批量删除</el-button>
      </div>
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row @select="handleSelect"  @select-all="handleSelect">
        <el-table-column align="center" type="selection" width="60"></el-table-column>
        <el-table-column align="center" label="分类ID" prop="id"></el-table-column>
        <el-table-column align="center" label="分类标题" prop="title"></el-table-column>
        <el-table-column align="center" label="分类副标" prop="subtitle"></el-table-column>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="最新修改时间">
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.updateTime, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改人" prop="lastOperator"></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <span v-text="scope.row.enable === 1 ? '可用' : '不可用'" :style="`color: ${scope.row.enable === 1?'#1a9f03':'#999'}`"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180" v-if="rightsButtons['edit'] || rightsButtons['del']">
          <template slot-scope="scope">
            <router-link v-if="rightsButtons['edit']" :to="{ name: 'productRecommendEdit', params: { id: scope.row.id } }">
              <el-button type="primary" size="mini">编辑</el-button>
            </router-link>
            <el-button type="danger" size="mini" @click="delItem('one', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal">
      </el-pagination>
    </section>
  </div>
</template>

<script>
  export default {
    name: "productRecommend",
    data () {
      return {
        list: [],
        listQuery: {
          pageIndex: 1,
          pageSize: 10
        },
        listTotal: 0,
        listLoading: false,
        ids: []
      }
    },
    activated () {
      this.getList()
    },
    created () {
      if (this.$store.getters.cachedViews.length === 0) this.getList()
    },
    methods: {
      // 表格复选框
      handleSelect (selection) {
        this.ids = []
        selection.map((item) => {
          this.ids.push(item.id) 
        })
      },
      // 删除分类
      delItem (delType, row) {
        if (delType==='batch') {
          if (this.ids.length === 0) {
            this.$message.error('请选择分类商品')
            return
          }
        }
        this.$confirm('确认删除选中商品分类删除后将不存在，请谨慎处理', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request({
            url: '/manage-home-web/cateRecommend/delete',
            method: 'post',
            data: {
              ids : delType==='batch'?this.ids:[row.id]
            }
          }).then((res) => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.getList()
            }
          }).catch(err => {
            console.log(err)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      // 获取列表
      getList () {
        this.listLoading = true
        this.request({
          url: '/manage-home-web/cateRecommend/list',
          method: 'get',
          params: this.listQuery
        }).then(({data, totalCount}) => {
          if (!data && this.listQuery.pageIndex - 1 > 0) {
            this.handleCurrentChange(this.listQuery.pageIndex - 1)
          }
          this.list = data
          this.listTotal = Number(totalCount)
          this.listLoading = false
        }).catch(err => {
          this.list = []
          this.listTotal = 0
          this.listLoading = false
        })
      },
      //切换每页条数
      handleSizeChange (value) {
        this.listQuery.pageSize = value
        this.getList()
      },
      // 切换分页
      handleCurrentChange (page) {
        this.listQuery.pageIndex = page
        this.getList()
      }
    }
  }
</script>
